<template>
    <div class="login">
         <div class="head">
            <img src="../assets/img/back.png" alt="">
            <p>注册</p>
         </div>
         <h1>登录</h1>
         <div class="ihone">
             <input type="text" placeholder="请输入手机号" v-model="ipone">
         </div>
         <div class="password">
            <input type="password" placeholder="请输入密码" v-model="password">
         </div>
         <div class="bts">
              <p @click="login"  :class="{'com':flag}"> 登录</p>
         </div>
         <div class="bg">
            <img src="../assets/img/t6.png" alt="">
         </div>
    </div>
</template>

<script>
import {Toast} from "vant"
    export default {
        data() {
            return {
                ipone:'',
                password:'',
                flag:false, 
            }
        },
        methods: {
            login(){
              let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
              if(!reg.test(this.ipone)){
                    Toast("请输入正确的手机号");
                  return;
              }
              
         if (this.ipone=='18814271534'&&this.password=='longlong520') {
                 this.$router.push('./user')
                 window.localStorage.setItem('token',this.ipone)
                 let index=window.localStorage.getItem('tarindex')
                 index=4
                 window.localStorage.setItem('tarindex',index)
         }
         else{
            Toast("请输入正确的手机号和密码");
         }
             
         }
        },
        watch:{
            'ipone':function () {
                if (this.ipone!=null) {
                   
                    this.flag=true
                }
              if (this.ipone=='') {
                this.flag=false
              }
               
               
            }
        }
    }
</script>

<style lang="less" scoped>
 .login{
    background-color: #fff;
    
    .head{
        padding: 10px 0px;
        width: 90%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        img{
            display: block;
            width: 25px;
        }
        p{
            color: gray;
        }
    }
    h1{
        width: 90%;
        padding: 20px 0px;
        padding-bottom: 40px;
        margin: 0 auto;
        font-weight: 700;
        font-size: 25px;
    }
    .ihone,.password{
        padding: 10px 0px;
        width: 90%;
        margin: 0 auto;
        border-bottom: 1px solid #f2f2f2;
        input{
            width: 100%;
            outline: none;
            border: none;
            font-size: 14px;
            height: 20px;
           color: black;
            
        }
    }
    .ihone{
        border-top: 1px solid #f2f2f2;
    }
    .bts{
       width: 90%;
       margin: 0 auto;
       padding: 20px 0px;
       p{
        text-align: center;
        padding: 12px;
        background-color: gray;
        color: #fff;
        border-radius: 30px;
       }
       .com{
        background-color: red;
       }
    }
    .bg{
      img{
        width: 100%;
        height: 360px;
      }
    }
 }
</style>